<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div>
          <div
            v-for="(item, index) in programmingLanguages"
            :key="item.id"
            style="display: inline-block; padding: 0 20px; cursor: pointer"
            @click="clickNav(item.id, index)"
            :style="
              index === headerIndex
                ? 'color: #0461b7;font-weight: 800;background: #77ff10;'
                : ''
            "
          >
            {{ item.title }}
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div
            v-for="(item, index) in list"
            :key="item.id"
            style="cursor: pointer"
            :style="
              index === selectIndex
                ? 'color: #0461b7;font-weight: 800;background: #77ff10;'
                : ''
            "
            @click="getMain(item.id, index)"
          >
            {{ item.chapter_name }}
          </div>
          <!-- 左侧列表 -->
          <div v-if="!list.length">
            {{ "暂无内容" }}
          </div>
        </el-aside>
        <el-main v-loading="listLoading" style="position: relative">
          <!-- <div v-html="content"></div> -->
          <div
            v-for="item in content"
            :key="item.id"
            style="background: rgb(72 209 139);
                  border-radius: 10px;
                  padding: 1px 5px;
                  border: 2px solid #468129;
                  margin: 12px 0px;}">
            <h1>{{ item.title }}</h1>
            <tinymce
              v-model="item.content"
              :height="500"
              :plugins="plugins"
              :inline="true"
              :readonly="true"
              :toolbar="false"
              :menubar="false"
              :quickbars_selection_toolbar="false"
            />
          </div>
          <div
            style="
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 2;
              opacity: 0;
              background: aliceblue;
            "
          >
            占位
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-button
      style="
        font-size: 14px;
        background: #0088ff;
        color: #ffffff;
        position: fixed;
        bottom: 50px;
        right: 50px;
        padding: 10px;
        border-radius: 5px;
        z-index: 20;
        cursor: pointer;
      "
      @click="isVisible = true"
    >
      在线调试
    </el-button>
    <!-- <div>ddddd</div> -->
    <el-dialog
      title="编辑结果"
      :visible.sync="isVisible"
      width="80%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- <div v-html="content"></div> -->
      <MyEditor />
      <div slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { _axiosGet } from '@/utils/axios-request'
import Tinymce from '@/components/Tinymce/index.vue'
import MyEditor from '../editor/index.vue'

@Component({
  name: 'Details',
  components: { Tinymce, MyEditor }
})
export default class extends Vue {
  private isVisible = false;
  private listLoading = false;
  private headerIndex = 0;
  private selectIndex = 0;
  private content = '';
  private programmingLanguages: any[] = [];
  private list: any[] = [];
  private plugins = ['quickbars'];

  // /api/admin/programmingLanguages

  private clickNav(type: any, index: number) {
    this.headerIndex = index
    this.content = ''
    _axiosGet('/api/admin/chapters', {
      'filter[programming_language_id]': type
    }).then((response: any) => {
      this.list = response.data
      console.log('555', this.list)
      if (response.data.length) this.getMain(response.data[0].id, 0)
    })
  }

  private getMain(id: string, index: number) {
    this.listLoading = true
    this.selectIndex = index
    console.log(id)
    _axiosGet('/api/admin/chapterdetails', {
      'filter[chapter_id]': id
    }).then((response: any) => {
      this.content = response.data
      this.listLoading = false
    })
  }

  private initData() {
    _axiosGet('/api/admin/programmingLanguages').then((response: any) => {
      this.programmingLanguages = response.data
      if (response.data.length) {
        this.clickNav(response.data[this.headerIndex].id, this.headerIndex)
      }
    })
  }

  created() {
    this.initData()
  }
}
</script>

<style>
aside {
  padding: 10px !important;
}
.el-header,
.el-footer {
  text-align: left !important;
}
.el-header,
.el-footer {
  background-color: #0c5e38;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #44ffa8;
  color: #333;
  text-align: center;
  line-height: 40px;
}

.el-main {
  /* background-color: #efefef; */
  color: #333;

  /* text-align: center; */
  line-height: 36px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
